<template>
  <view class="container">
    <!-- 产品列表 -->
    <scroll-view class="product-list" scroll-y>
      <view 
        v-for="(item, index) in products" 
        :key="index"
        class="product-item"
        @click="goToDetail(item.id)">  <!-- 修改点击事件 -->
        <image class="product-thumb" :src="BASE_URL+item.imgUrl" mode="aspectFill" />
        <view class="product-info">
          <text class="product-name">{{ item.proName }}</text>
          <text class="product-desc">{{ item.description }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getProdPage } from '@/api/product'
import {BASE_URL} from '@/utils/request'

export default {
  data() {
    return {
      BASE_URL: BASE_URL,
      products: [
        {
          id: 1001,  // 新增id字段
          name: '智能工业机器人',
          desc: '自动化生产解决方案',
          price: '¥ 89,999',
          image: '/static/product/robot.jpg'
        },
        {
          id: 1002,  // 新增id字段
          name: '工业级3D打印机',
          desc: '高精度快速成型设备',
          price: '¥ 256,800',
          image: '/static/product/3d-printer.jpg'
        }
      ]
    }
  },
  
  async created() {
    try {
      // 获取推荐产品列表
      let param = {
        pageNum:1,
        count:20
      }
      const res = await getProdPage(param)
      // console.log("res===",res);
      if(res){
        this.products = res.list;

      }
    } catch (error) {
      console.error('获取产品列表失败', error)
    }
  },
  methods: {  // 添加方法
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`
      })
    }
  }
}
</script>

<style>
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 15px;
}

.product-list {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.product-thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 15px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-desc {
  font-size: 13px;
  color: #666;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 16px;
  color: #e4393c;
  font-weight: bold;
}
</style>